import './loading.less'

export default defineComponent({
  name: 'MyLoading',
  props: {
    isLoading: {
      type: Boolean,
      require: true,
      default: true,
    },
  },
  setup(props) {
    let {isLoading} = toRefs(props)
    return () => (
      <div
        class={[
          'container',
          'myLoading',
          'fixed',
          isLoading.value ? 'showLoading' : 'hideLoading',
        ]}
      >
        <div
          class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
          style="width: 175px; height: 100px"
        >
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    )
  },
})
